<!-- 推广任务 -->
<template>
	<view class="extension">
		<!-- 导航栏 -->
		<view class="nav x-f" :style="{paddingTop: `${statusBarHeight + 11}`  + 'px'}" @tap="back">
			<u-icon name="arrow-leftward" color="#FFF" size="36"></u-icon>
			<view class="right pa tc" :style="{left: `${screenWidth / 2 - 45 }`+ 'px'}">
				推广任务
			</view>
		</view>
		<view class="content">
			<!-- 上部标题 -->
			<view class="title">
				<view class="">【推广任务赚积分】</view>
				<view class="text"> 最高积分可获得500分</view>
			</view>
			<!-- 内容 -->
			<view class="content_box">
				<view class="item" v-for="(item,index) in message_tasks">
					<view class="img">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="text_box">
						<view class="c_title">{{item.title}}</view>
						<view class="c_content">{{item.content}}</view>
						<view class="date">时间：{{item.start_date}}-{{item.end_date}}</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import { mapState } from 'vuex';
	export default {
		data() {
			return {
				message_tasks: [	//任务列表
					{
						id: 0,
						title: '618年中大促',
						content: '邀请注册，畅享积分',
						start_date: 1623772800,
						end_date: 1624118400,
						img: this.imgUrl + 'extension_a.png'
					},
					{
						id: 1,
						title: '618年中大促',
						content: '邀请注册，畅享积分',
						start_date: 1623772800,
						end_date: 1624118400,
						img: this.imgUrl + 'extension_b.png'
					}
				]
			}
		},
        computed: {
            ...mapState({
                statusBarHeight: state => state.init.systemInfo.statusBarHeight,
                screenWidth: state => state.init.systemInfo.screenWidth
            })
        },
		methods: {
			back(){this.$Router.back(1)}
		}
	}
</script>

<style>
	page {
		background: url(https://mystore-1304299581.cos.ap-guangzhou.myqcloud.com/static/image/extension_bg.png) no-repeat;
		background-size: 100% 30%;
	}
</style>
<style lang="scss" scoped>
	@import './index.scss';
</style>
